<template>
  <div class="google_auth_page">
    <CommonHeader
      :title="curStep == 0 ? '谷歌认证器' : '绑定谷歌验证'"
      :isBack="true"
      @back="preStep"
    />
    <div class="google_auth_content page_no_tab_bar">
      <!-- 已验证 -->
      <!-- <div class="auth_success" v-if="user.userInfo.googleStatus == 1"> -->
      <div class="auth_success" v-if="curStep == 0">
        <div class="auth_img">
          <img src="@/assets/profile/security/auth_img.png" alt="" />
        </div>
        <div class="auth_desc">谷歌验证器APP将保护您的账户和体现功能</div>
        <!-- 更改谷歌验证器 -->
        <ul class="auth_list">
          <li @click="changeAuth">
            <span>更改谷歌验证器</span>
            <img src="@/assets/common/go_icon.png" alt="" />
          </li>
        </ul>
      </div>

      <!-- 验证页 -->
      <StepOne v-if="curStep == 1" :step="curStep" />
      <StepTwo v-if="curStep == 2" />
      <StepThree v-if="curStep == 3" @success="nextStep" />
      <Success v-if="curStep == 4" />
      <!-- 操作按钮 -->
      <div
        v-if="curStep > 0 && curStep < 3"
        class="operate_btn"
        @click="nextStep"
      >
        下一步
      </div>
      <div v-if="curStep == 4" class="operate_btn" @click="goBack">返回</div>
    </div>

    <!-- 弹窗 -->
    <ConfirmDialog ref="confirmDialogRef" />
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
import CommonHeader from "@/components/CommonHeader.vue";
import StepOne from "./components/StepOne.vue";
import StepTwo from "./components/StepTwo.vue";
import StepThree from "./components/StepThree.vue";
import Success from "./components/Success.vue";
import ConfirmDialog from "./components/ConfirmDialog.vue";
import { useUserInfo } from "@/stores/userInfo";

// 获取路由对象
const router = useRouter();
const user = useUserInfo();
// 定义 ref
const confirmDialogRef = ref();
// 当前步骤
const curStep = ref(1); // 0 已验证 1,2,3,4 步骤页

// 更改谷歌验证
const changeAuth = () => {
  confirmDialogRef.value.visible = true;
};

// 上一步
const preStep = () => {
  if (curStep.value <= 1) {
    router.back();
  } else {
    curStep.value -= 1;
  }
};

// 下一步
const nextStep = () => {
  curStep.value += 1;
};

// 返回
const goBack = () => {
  setTimeout(() => {
    if (user.userInfo.googleStatus) {
      // 已验证
      curStep.value = 0;
      sessionStorage.setItem("curStep", "0");
    } else {
      // 未验证
      curStep.value = 1;
      sessionStorage.setItem("curStep", "1");
    }
  }, 1000);
  router.back();
};

// 初始化数据
onMounted(() => {
  let newStep = sessionStorage.getItem("curStep") || "1";
  curStep.value = Number(newStep);
});
</script>

<style lang="scss">
.google_auth_page {
  .google_auth_content {
    padding-top: 20px;
    .auth_success {
      .auth_img {
        text-align: center;
        margin: 30px;
      }
      .auth_desc {
        text-align: center;
      }

      .auth_list {
        margin-top: 50px;
        li {
          display: flex;
          justify-content: space-between;
          align-items: center;
        }
      }
    }

    .step_container {
      .step_box {
        margin-bottom: 50px;
        .step_tit {
          display: flex;
          align-items: center;
          .step_no {
            display: flex;
            align-items: center;
            justify-content: center;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #0d5bb0;
            margin-right: 10px;
          }
        }
        .step_desc {
          padding-left: 40px;
          margin-top: 10px;
          font-size: 14px;
        }
      }
      .notice_box {
        text-align: center;
        div {
          margin-top: 20px;
        }
      }
      .operate_btn {
        margin-top: 50px;
      }
    }
  }
}
</style>
